<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/12/18
  Time: 13:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据中心 - 学生选课统计</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        #chartContainer {
            position: relative;
            margin: 20px auto;
            width: 80%;
            max-width: 800px;
            height: 400px;
        }
        .chart-buttons {
            text-align: center;
            margin-bottom: 20px;
        }
        .chart-buttons button {
            margin: 0 10px;
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>

<div class="chart-buttons">
    <button onclick="setChartType('line')">折线图</button>
    <button onclick="setChartType('bar')">柱状图</button>
    <button onclick="setChartType('pie')">扇形图</button>
</div>

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    let myChart = null;

    const data = {
        labels: ['Javaee', 'Hadoop', '虚拟化', '毛概', '软件工程', '音乐鉴赏'],
        datasets: [{
            label: '选课统计',
            data: [40, 20, 12, 39, 10, 40],
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    };

    const options = {
        responsive: true,
        plugins: {
            legend: {
                position: 'top'
            },
            tooltip: {
                intersect: false
            }
        }
    };

    function setChartType(type) {
        if (myChart) {
            myChart.destroy();
        }
        myChart = new Chart(ctx, {
            type: type,
            data: data,
            options: options
        });
    }

    // 默认设置为折线图
    setChartType('line');
</script>

</body>
</html>
